<template>
    <div class="person">
        <ul class="news-title">
            <li v-for="news of newsList" :key="news.id">
                <RouterLink to="/News/Detail">{{ news.title }}</RouterLink>
            </li>
        </ul>
        <div class="news-content"> <!-- 嵌套路由 -->
            <RouterView></RouterView>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'; 
import { RouterView, RouterLink } from 'vue-router';
let newsList = reactive([{ id: '001', title: '新闻一', content: '邯郸三少年杀人事件' },
{ id: '002', title: '新闻二', content: '春暖花开万物复苏' },
{ id: '003', title: '新闻三', content: '清明时节雨纷纷' },
{ id: '004', title: '新闻四', content: '五一假期即将来临，是否考虑出行' }
])

</script>
<style scoped>
.person {
    padding: 30px;
    display: flex;

    .news-title {
        width: 30%;

        li {
            list-style: none;
            font-size: 20px;
            font-weight: bold;
            margin: 10px 0;
        }
    }

    .news-content {
        width: 70%;
        border: 1px #000000 solid;
        border-radius: 20px;
    }
}
</style>
